<template>
  <div class="sign-box">
    <div class="hander-flex">
      <div class="left-box">
        <div class="mark"></div>
        <span>签收信息</span>
      </div>
    </div>
    <div v-for="(item, index) in repeatSign"
         :key="index">
      <div class="header-title">
        <div class="header-sub">
          <span>【重签信息】</span>
          <span>重签时间：{{ item.signTime }}</span>
        </div>
      </div>
      <div class="center"
           :style="{'height': height}">
        <div class="box-border">
          <el-row :gutter="20"
                  class="desc-box">
            <el-col :span="24">
              <description title="">
                <description-item label="申请手机号"
                                  :value="item.reSignMobile"
                                  :span="8" />
                <description-item label="申请时间"
                                  :value="item.reSignApplyAt"
                                  :span="8" />
                <description-item label="申请设备位置"
                                  :value="item.reSignDeviceAddress"
                                  :span="8" />
                <description-item label="申请短信"
                                  :value="item.reSignMessage"
                                  :span="24" />
              </description>
            </el-col>
          </el-row>
          <el-row :gutter="20"
                  class="desc-box">
            <el-col :span="24">
              <description title="">
                <description-item label="重签手机号"
                                  :value="item.signMobile"
                                  :span="8" />
                <description-item label="重签人微信openid"
                                  :value="item.openId"
                                  :span="8" />
                <description-item label="重签手机位置"
                                  :value="item.signAddress"
                                  :span="8" />
                <description-item label="重签设备位置"
                                  :value="item.deviceAddress"
                                  :span="8" />
                <description-item v-if="item.signCode"
                                  label="重签签收码"
                                  :value="item.signCode"
                                  :span="8" />
              </description>
            </el-col>
          </el-row>
          <SignTable :goods="item.goods" />
          <div class="total">合计：数量 {{item.fromTotalAmount}}件；实签 {{item.toTotalAmount}}件；异常数 {{item.totalSignException}}件</div>
          <div v-if="item.signDesc"
               class="explain">签收说明：<span>{{item.signDesc || '--'}}</span></div>
          <div v-if="item.attachments.length"
               class="bottom-img">
            <nr-upload :is-look="isLook"
                       title="签收图片："
                       :attaches="item.attachments" />
          </div>
          <div v-else
               class="bottom-img">
            签收图片：--
          </div>
        </div>
      </div>
    </div>
    <div class="header-title">
      <div class="header-sub">
        <span>【签收信息】</span>
        <span>签收时间：{{ sign.signTime }}</span>
      </div>
    </div>
    <div class="center"
         :style="{'height': height}">
      <div class="box-border">
        <el-row :gutter="20"
                class="desc-box">
          <el-col :span="24">
            <description title="">
              <description-item label="签收手机号"
                                :value="sign.signMobile"
                                :span="8" />
              <description-item label="签收人微信openid"
                                :value="sign.openId"
                                :span="8" />
              <description-item label="签收手机位置"
                                :value="sign.signAddress"
                                :span="8" />
              <description-item label="签收设备位置"
                                :value="sign.deviceAddress"
                                :span="8" />
              <description-item v-if="sign.signCode"
                                label="签收码"
                                :value="sign.signCode"
                                :span="8" />
            </description>
          </el-col>
        </el-row>
        <SignTable :goods="sign.goods" />
        <div class="total">合计：数量 {{sign.fromTotalAmount}}件；实签 {{sign.toTotalAmount}}件；异常数 {{sign.totalSignException}}件</div>
        <div v-if="sign.signDesc"
             class="explain">签收说明：<span>{{sign.signDesc || '--'}}</span></div>
        <div v-if="sign.attachments.length"
             class="bottom-img">
          <nr-upload :is-look="isLook"
                     title="签收图片："
                     :attaches="sign.attachments" />
        </div>
        <div v-else
             class="bottom-img">
          签收图片：--
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Description from "./desc/Description";
import DescriptionItem from "./desc/DescriptionItem";
import nrUpload from "@/components/advance/upload/Upload.vue";
import SignTable from "./SignTable.vue"

export default {
  name: 'SignInfo',
  components: { Description, DescriptionItem, nrUpload, SignTable },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      isLook: true,
      height: ""
    }
  },
  computed: {
    repeatSign () {
      return this.value?.orderReSignResultList || []
    },
    sign () {
      return this.value?.orderSignResult || []
    },
    ereData () {
      return this.value?.certEreData || {}
    }
  },
  created () {
  }
}
</script>

<style scoped>
.desc-box {
  /* margin-bottom: 20px; */
  margin: 0 0 20px 0 !important;
  border-bottom: 1px dashed var(--prev-border-color-grey);
}
.left-desc {
  border-bottom: 1px dashed var(--prev-border-color-grey);
}
.table-top {
  padding-top: 20px;
}
.total {
  padding-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--prev-color-text-darkgrey);
}
.explain {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000;
}
.explain span {
  color: var(--prev-color-text-darkgrey);
}
.hander-flex {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.left-box {
  display: flex;
  align-items: center;
}
.left-box span {
  color: #000000;
  font-weight: 400;
  line-height: 21px;
  font-size: 16px;
}
.mark {
  width: 3px;
  height: 21px;
  background-color: var(--prev-color-primary);
  margin-right: 7px;
}
.box-border {
  padding: 20px;
}
.center {
  background-color: #fafafa;
  border-radius: 10px;
  /* margin: 10px 0; */
}
.header-title {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background-color: #ebebeb;
  border-radius: 10px 10px 0px 0px;
}
.header-sub {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
</style>